<template>
  <div class="detail-container">
    <el-card shadow="never">
      <span class="font-title-medium">退货商品</span>
      <el-table border height="100%" class="standard-margin" ref="productTable" :data="productList">
        <el-table-column label="商品图片" width="160" align="center">
          <template #default="{ row }">
            <img style="height: 80px" :src="row.productPic" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template #default="{ row }">
            <span class="font-small">{{ row.productName }}</span
            ><br />
            <span class="font-small">品牌：{{ row.productBrand }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格/货号" width="180" align="center">
          <template #default="{ row }">
            <span class="font-small">价格：￥{{ row.productRealPrice }}</span
            ><br />
            <span class="font-small">货号：NO.{{ row.productId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="属性" width="180" align="center">
          <template #default="{ row }">{{ row.productAttr }}</template>
        </el-table-column>
        <el-table-column label="数量" width="100" align="center">
          <template #default="{ row }">{{ row.productCount }}</template>
        </el-table-column>
        <el-table-column label="小计" width="100" align="center">
          <template #default>￥{{ totalAmount }}</template>
        </el-table-column>
      </el-table>
      <div style="float: right; margin-top: 15px; margin-bottom: 15px">
        <span class="font-title-medium">合计：</span>
        <span class="font-title-medium color-danger">￥{{ totalAmount }}</span>
      </div>
    </el-card>
    <el-card shadow="never" class="standard-margin">
      <span class="font-title-medium">服务单信息</span>
      <div class="form-container-border">
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small">服务单号</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.id }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col>
          <el-col class="form-border font-small" :span="18">{{ APPLY_STATUS_DICT[orderReturnApply.status as Status] }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small" style="height: 50px; line-height: 30px">订单编号 </el-col>
          <el-col class="form-border font-small" :span="18" style="height: 50px">
            {{ orderReturnApply.orderSn }}
            <el-button link size="small" @click="handleViewOrder">查看</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col>
          <el-col class="form-border font-small" :span="18">{{ formatDateTime(orderReturnApply.createTime) }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">用户账号</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.memberUsername }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">联系人</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.returnName }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.returnPhone }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">退货原因</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.reason }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">问题描述</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.description }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height: 100px; line-height: 80px">凭证图片 </el-col>
          <el-col class="form-border font-small" :span="18" style="height: 100px">
            <img v-for="item in proofPics" :key="item" style="width: 80px; height: 80px" :src="item" />
          </el-col>
        </el-row>
      </div>
      <div class="form-container-border">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
          <el-col class="form-border font-small" :span="18">￥{{ totalAmount }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height: 52px; line-height: 32px">确认退款金额 </el-col>
          <el-col class="form-border font-small" style="height: 52px" :span="18">
            ￥
            <el-input
              size="small"
              v-model="updateStatusParam.returnAmount"
              :disabled="orderReturnApply.status !== 0"
              style="width: 200px; margin-left: 10px"
            ></el-input>
          </el-col>
        </el-row>
        <div v-show="orderReturnApply.status !== 3">
          <el-row>
            <el-col class="form-border form-left-bg font-small" :span="6" style="height: 52px; line-height: 32px">选择收货点 </el-col>
            <el-col class="form-border font-small" style="height: 52px" :span="18">
              <el-select
                size="small"
                style="width: 200px"
                :disabled="orderReturnApply.status !== 0"
                v-model="updateStatusParam.companyAddressId"
              >
                <el-option v-for="address in companyAddressList" :key="address.id" :value="address.id" :label="address.addressName">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col class="form-border form-left-bg font-small" :span="6">收货人姓名</el-col>
            <el-col class="form-border font-small" :span="18">{{ currentAddress.name }}</el-col>
          </el-row>
          <el-row>
            <el-col class="form-border form-left-bg font-small" :span="6">所在区域</el-col>
            <el-col class="form-border font-small" :span="18">{{ formatRegion(currentAddress) }}</el-col>
          </el-row>
          <el-row>
            <el-col class="form-border form-left-bg font-small" :span="6">详细地址</el-col>
            <el-col class="form-border font-small" :span="18">{{ currentAddress.detailAddress }}</el-col>
          </el-row>
          <el-row>
            <el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
            <el-col class="form-border font-small" :span="18">{{ currentAddress.phone }}</el-col>
          </el-row>
        </div>
      </div>
      <div class="form-container-border" v-show="orderReturnApply.status !== 0">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">处理人员</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.handleMan }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">处理时间</el-col>
          <el-col class="form-border font-small" :span="18">{{ formatDateTime(orderReturnApply.handleTime) }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">处理备注</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.handleNote }}</el-col>
        </el-row>
      </div>
      <div class="form-container-border" v-show="orderReturnApply.status === 2">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">收货人员</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.receiveMan }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">收货时间</el-col>
          <el-col class="form-border font-small" :span="18">{{ formatDateTime(orderReturnApply.receiveTime) }}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">收货备注</el-col>
          <el-col class="form-border font-small" :span="18">{{ orderReturnApply.receiveNote }}</el-col>
        </el-row>
      </div>
      <div class="form-container-border" v-show="orderReturnApply.status === 0">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height: 52px; line-height: 32px">处理备注</el-col>
          <el-col class="form-border font-small" :span="18">
            <el-input size="small" v-model="updateStatusParam.handleNote" style="width: 200px; margin-left: 10px"></el-input>
          </el-col>
        </el-row>
      </div>
      <div class="form-container-border" v-show="orderReturnApply.status === 1">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height: 52px; line-height: 32px">收货备注</el-col>
          <el-col class="form-border font-small" :span="18">
            <el-input size="small" v-model="updateStatusParam.receiveNote" style="width: 200px; margin-left: 10px"></el-input>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 15px; text-align: center" v-show="orderReturnApply.status === 0">
        <el-button type="primary" size="small" @click="handleUpdateStatus(1)">确认退货</el-button>
        <el-button type="danger" size="small" @click="handleUpdateStatus(3)">拒绝退货</el-button>
      </div>
      <div style="margin-top: 15px; text-align: center" v-show="orderReturnApply.status === 1">
        <el-button type="primary" size="small" @click="handleUpdateStatus(2)">确认收货</el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getApplyDetail, updateApplyStatus } from '@/api/returnApply'
import { fetchList } from '@/api/companyAddress'
import { useRoute, useRouter } from 'vue-router'
import type { Address } from '@/models/address'
import { formatDateTime } from '@/utils/format'
import type { ReturnApply, ReturnApplyDto, Status } from '@/models/returnApply'
import { APPLY_STATUS_DICT } from '@/constant'
import BigNumber from 'bignumber.js'

defineOptions({ name: 'ApplyDetail' })
const route = useRoute()
const router = useRouter()
const id = ref(0)
const orderReturnApply = ref<ReturnApply>({})
const productList = ref<ReturnApply[]>([])
const proofPics = ref<string[]>([])
const updateStatusParam = ref<ReturnApplyDto>({})
const companyAddressList = ref<Address[]>([])
onMounted(() => {
  id.value = Number(route.query.id)
  getDetail()
})
const totalAmount = computed(() => {
  const { productRealPrice, productCount } = orderReturnApply.value || {}
  if (productRealPrice && productCount) {
    return new BigNumber(productRealPrice).multipliedBy(productCount).toNumber()
  } else {
    return '-'
  }
})
const currentAddress = computed<Address>(() => {
  return companyAddressList.value?.find((item) => item.id === updateStatusParam.value.companyAddressId) || {}
})

function formatRegion(address: any) {
  if (address.province == null) {
    return ''
  }
  return address.province + '  ' + address.city + '  ' + address.region
}

function handleViewOrder() {
  router.push({ path: '/oms/orderDetail', query: { id: orderReturnApply.value.orderId } })
}
async function getDetail() {
  const response = await getApplyDetail(Number(id.value))
  orderReturnApply.value = response.data.data
  productList.value = [orderReturnApply.value]
  if (orderReturnApply.value.proofPics != null) {
    proofPics.value = orderReturnApply.value.proofPics.split(',')
  }
  //退货中和完成
  if (orderReturnApply.value.status === 1 || orderReturnApply.value.status === 2) {
    updateStatusParam.value.returnAmount = orderReturnApply.value.returnAmount
    updateStatusParam.value.companyAddressId = orderReturnApply.value.companyAddressId
  }
  getCompanyAddressList()
}
async function getCompanyAddressList() {
  const response = await fetchList()
  companyAddressList.value = response.data.data
  if (orderReturnApply.value.status === 0) {
    updateStatusParam.value.companyAddressId = companyAddressList.value.find((item) => item.receiveStatus === 1)?.id
  }
}
async function handleUpdateStatus(status?: Status) {
  updateStatusParam.value.status = status
  await ElMessageBox.confirm('是否要进行此操作?', '提示', { type: 'warning' })
  await updateApplyStatus(updateStatusParam.value)
  ElMessage.success('操作成功!')
  router.back()
}
</script>
<style scoped>
.detail-container {
  position: absolute;
  left: 0;
  right: 0;
  width: 1080px;
  padding: 35px 35px 15px 35px;
  margin: 20px auto;
}

.standard-margin {
  margin-top: 15px;
}

.form-border {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
}

.form-container-border {
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
  margin-top: 15px;
}

.form-left-bg {
  background: #f2f6fc;
}
</style>
